
import 'package:first_flutter_project/main/main.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

import '../AfterLayoutRoute.dart';
import '../Gesture/GestureDetectorConflictTest.dart';
import '../Gesture/GestureDetectorHitTest.dart';
import '../Gesture/NotificationInterruptTest.dart';

///组合动画用法
///
///
/// 中定义了三个动画，分别是对Container的height、color、padding属性设置的动画
/// ，然后通过Interval来为每个动画指定在整个动画过程中的起始点和终点。
/// 下面我们来实现启动动画的路由：
///
/// 1开始时高度从0增长到300像素，同时颜色由绿色渐变为红色；这个过程占据整个动画时间的60%。
/// 2.高度增长到300后，开始沿X轴向右平移100像素；这个过程占用整个动画时间的40%。
///

class StaggerRoute extends StatefulWidget {
  @override
  _StaggerRouteState createState() => _StaggerRouteState();
}

class _StaggerRouteState extends State<StaggerRoute>
    with TickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();

    _controller = AnimationController(
      duration: const Duration(milliseconds: 2000),
      vsync: this,
    );
  }

  _playAnimation() async {
    try {
      //先正向执行动画
      await _controller.forward().orCancel;
      //再反向执行动画
      await _controller.reverse().orCancel;
    } on TickerCanceled {
      // the animation got canceled, probably because we were disposed
    }
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        children: [
          ElevatedButton(
            onPressed: () => _playAnimation(),
            child: Text("start animation"),
          ),
          Container(
            width: 100,
            height: 300.0,

            decoration: BoxDecoration(
              color: Color(0xFF15A3EF),
              border: Border.all(
                color: Colors.black.withOpacity(0.5),
              ),
            ),
            //调用我们定义的交错动画Widget
            child: StaggerAnimation(controller: _controller),
          ),
        ],
      ),
    );
  }
}

class StaggerAnimation extends StatelessWidget {
  late Animation<double> controller;
  late Animation<double> height;
  late Animation<EdgeInsets> padding;
  late Animation<Color?> color;

  StaggerAnimation({Key? key, required this.controller}) : super(key: key) {
    //高度动画
    height = Tween<double>(
      begin: .0,
      end: 300.0,
    ).animate(
      CurvedAnimation(
        parent: controller,
        curve: Interval(
          0.0, 0.6, //间隔，前60%的动画时间
          curve: Curves.ease,
        ),
      ),
    );

    //颜色动画
    color = ColorTween(
      begin: Colors.green,
      end: Colors.red,
    ).animate(
      CurvedAnimation(
        parent: controller,
        curve: Interval(
          0.0, 0.6, //间隔，前60%的动画时间
          curve: Curves.ease,
        ),
      ),
    );

    padding = Tween<EdgeInsets>(
      begin: EdgeInsets.only(left: .0),
      end: EdgeInsets.only(left: 100.0),
    ).animate(
      CurvedAnimation(
        parent: controller,
        curve: Interval(
          0.6, 1.0, //间隔，后40%的动画时间
          curve: Curves.ease,
        ),
      ),
    );
  }

  Widget _buildAnimation(BuildContext context, Widget? child) {
    return Container(
      alignment: Alignment.bottomCenter,
      padding: padding.value,
      child: Container(
        color: color.value,
        width: 50.0,
        height: height.value,
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      builder: _buildAnimation,
      animation: controller,
    );
  }
}




///组合动画 实现 hero动画效果

class StaggerRouteHero extends StatefulWidget {
  @override
  _StaggerRouteStateHero createState() => _StaggerRouteStateHero();
}

class _StaggerRouteStateHero extends State<StaggerRouteHero>
    with TickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();

    _controller = AnimationController(
      duration: const Duration(milliseconds: 2000),
      vsync: this,
    );
  }

  _playAnimation() async {
    try {
      //先正向执行动画
      await _controller.forward().orCancel;
      //再反向执行动画
      await _controller.reverse().orCancel;
    } on TickerCanceled {
      // the animation got canceled, probably because we were disposed
    }
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        children: [
          ElevatedButton(
            onPressed: () => _playAnimation(),
            child: Text("start animation"),
          ),
          Container(
            width: 400,
            height: 600.0,
            decoration: BoxDecoration(
              color: Color(0xFF15A3EF),
              border: Border.all(
                color: Colors.black.withOpacity(0.5),
              ),
            ),
            //调用我们定义的交错动画Widget
            child: StaggerAnimation1(controller: _controller),
          ),
        ],
      ),
    );
  }
}

class StaggerAnimation1 extends StatelessWidget {
  late Animation<double> controller;
  late Animation<double> height;
  late Animation<EdgeInsets> padding;
  late Animation<Color?> color;

  StaggerAnimation1({Key? key, required this.controller}) : super(key: key) {
    //高度动画
    height = Tween<double>(
      begin: 50.0,
      end: 300.0,
    ).animate(
      CurvedAnimation(
        parent: controller,
        curve: Interval(
          0.0, 1.0,//间隔，前60%的动画时间
          curve: Curves.ease,
        ),
      ),
    );

    //颜色动画
    color = ColorTween(
      begin: Colors.green,
      end: Colors.red,
    ).animate(
      CurvedAnimation(
        parent: controller,
        curve: Interval(
          0.0, 0.6, //间隔，前60%的动画时间
          curve: Curves.ease,
        ),
      ),
    );

    padding = Tween<EdgeInsets>(
      begin: EdgeInsets.only(top: 0.0),
      end: EdgeInsets.only(top: 400.0),
    ).animate(
      CurvedAnimation(
        parent: controller,
        curve: Interval(
          0.0, 1.0, //间隔，后40%的动画时间
          curve: Curves.ease,
        ),
      ),
    );
  }

  Widget _buildAnimation(BuildContext context, Widget? child) {
    return Container(
      alignment: Alignment.topLeft,
      padding: padding.value,
      child: Container(
        width: height.value,
        height: height.value,
        child: Image.network(
          netWorkImageUrl,
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      builder: _buildAnimation,
      animation: controller,
    );
  }
}
